<template>
    <!-- 不需要按钮 -->
</template>

<script setup>
import { WarningFilled } from '@element-plus/icons-vue'

const props = defineProps({
    message: {
        type: String,
        default: '确定执行此操作吗？'
    }
})

const emit = defineEmits(['confirm', 'cancel'])

const showConfirm = () => {
    ElMessageBox.confirm(
        h('div', { class: 'flex flex-col flex-center pt-20px pb-20px' }, [
            h(WarningFilled, {
                style: { width: '70px', height: '70px', color: '#ff6d34', marginBottom: '10px' }
            }),
            h('p', props.message)
        ]),
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true,
            closeOnClickModal:false,
            customClass: 'customize-message-box'
        }
    )
        .then(() => {
            emit('confirm')
        })
        .catch(() => {
            emit('cancel')
        })
}

// 暴露方法给父组件调用
defineExpose({ showConfirm })
</script>